<template>
  <div>
    <div class="search">
      <div class="search_box flex">
        <router-link to="/search">
          <div class="search_text">
            <div
              class="iconfont icon-search sarch_icnon"
              style="float: left"
            ></div>
            搜索商品, 共150166款好物
          </div>
        </router-link>
      </div>
    </div>

    <div class="nav flex">
      <div class="left">
        <!-- 左部导航 -->
        <div class="nav_list" v-for="(item, index) in navList" :key="item.id">
          <div
            class="nav_item"
            :class="{ active: index == changeShow }"
            @click="changeIndex(item.id, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="right">
        <!-- 右侧大图 -->
        <div class="right_img" v-for="item in rightImg" :key="item.id">
          <img class="right_img" :src="item.picUrl" mode="scaleToFill" />
        </div>

        
        <div class="container flex">
          
          <div
            class="container flex"
            v-for="item in categoryGroupList"
            :key="item.id"
            
          >
            <div class="container_title" v-if="item.name">
              <span class="container_span">{{ item.name }}</span>
            </div>

            <div
              class="box_min"
              v-for="list in item.categoryList"
              :key="list.id"
              @click="goToList(item.id,list.categoryType)"
            >
              <img class="box_img" :src="list.wapBannerUrl" alt="" />
              <div class="box_title">{{ list.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Api from "@/api/sort";
import { onMounted } from "vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
// 切换高亮
const changeShow = ref(0);
//存储1ID
const cateOneId = ref();
const changeIndex = (item: any, index) => {
  changeShow.value = index;
  getNavList(item);
  cateOneId.value = item;
  console.log(item);
};

// 左部导航
const navList = ref([]);
//右侧大图
const rightImg = ref([]);
// 右侧分类详情
const categoryL2List = ref([]);
// 右侧标题
const categoryGroupList = ref([]);



const getNavList = async (id: number | string) => {
  try {
    let result = await Api.getNavList(Date.now(), id);
    // 左部导航
    navList.value = result.categoryL1List;
    // 右侧分类详情
    categoryL2List.value = result.categoryL2List;
    // 右侧标题
    categoryGroupList.value = result.categoryGroupList;
    //右侧大图
    rightImg.value = (result.currentCategory || {}).bannerList;

    console.log(rightTitle.value[0].name);
  } catch (error) {
    console.log(error);
  }
};

////////////////////////////////////去到list页面////////////////////////////////////////////
// https://m.you.163.com/item/list?categoryId=1005002&subCategoryId=109329017&categoryType=0
const goToList = (towid,list) => {
  console.log("sds",list);
  
  router.push({
    path: "/list",
    query: {
      categoryId: cateOneId.value,
      subCategoryId: towid,
      categoryType:list
    },
  });
};

onMounted(() => {
  getNavList("");
});
</script>

<style scoped>
.flex {
  display: flex;
}
.search {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ededed;
  height: 30px;
}

.search_box {
  background: #ededed;
  font-size: 14px;
  height: 28px;
  width: 345px;
  border-radius: 5%;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
.sarch_icnon {
  margin-top: 2px;
}
.search_text {
  font-size: 14px;
  color: #666;
  margin: 5px auto;
  text-align: center;
}
.iconfont {
  margin-right: 5px;
}
.left {
  border-right: 1px solid #ededed;
  min-height: 667px;
  height: 500px;
}

.nav {
  height: 100%;
}

.nav_list {
  width: 81px;
}

.nav_item {
  font-size: 14px;
  padding: 10px 10px;
  position: relative;
  line-height: 28px;
}

.active::before {
  content: "";
  position: absolute;
  height: 50%;
  top: 25%;
  left: 0;
  bottom: 0;
  border-left: 3px solid #ab2b2b;
}

.right {
  padding: 15px;
  width: 100%;
}

.right_img {
  height: 96px;
  margin-bottom: 10px;
  background: #eee;
  width: 264px;
}

.title {
  font-size: 14px;
  padding-bottom: 4px;
  margin-bottom: 10px;
  float: left;
}
.line {
  border-bottom: 1px solid #eee;
  width: 264px;
}

.container {
  flex-wrap: wrap;
  justify-content: space-between;
  float: left;
}
/**
.minimg {
  width: 72px;
  height: 72px;
}

.minbox .text {
  font-size: 12px;
  align-items: center;
  padding-bottom: 30px;
  text-align: center;
}**/

.container::after {
  content: "";
  width: 72px;
}
.container_title {
  width: 264px;
  font-weight: bold;
  font-size: 16px;
  height: 25px;
  margin-bottom: 0 0 12px;
  padding: 0 0 4px;
  border-bottom: 1px  solid #999;
}
.container_span {
  float: left;
  margin-top: 4px;
}
.box_img {
  width: 72px;
  height: 72px;
}
.box_title {
  font-size: 14px;
  width: 72px;
  height: 36px;
}
</style>
